<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="MyRedux.js"></script>
    <button id="in">+1</button>
    <soan id='count'>0</soan>
    <button id="de">-1</button>
    <script>
        // 创建store
        var store = createStore(reducer, {count:0});
        // 创建reducer
        function reducer (state, action) {
            switch(action.type) {
                case 'increment' :
                    return {...state, count:state.count + action.payload};
                case 'decrement' :
                    return {...state, count:state.count - action.payload};
                default : return state

            }
            
        }
        document.getElementById('in').onclick = function () {
            store.disPatch({
                type:'increment',
                payload:2
            })
        }
        document.getElementById('de').onclick = function () {
            store.disPatch({
                type:'decrement',
                payload:1
            })
        }
        store.subscribe(() => {
            document.getElementById('count').innerHTML = store.getState().count
        })
    </script>
</body>
</html>